


// 组件按组分块  webpackChunkName: "about"  异步加载相同名字的组件打包到一起
/**
 * 使用 webpack
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)
 静态导入  导致初始加载时间变长,但一旦加载完成，页面之间的导航会更快，因为所有组件都已经在内存中。
 动态导入：组件按需加载，减少了初始加载时间，但可能会增加后续页面导航的加载时间（如果用户首次访问该页面）。
      指定 chunk 名称 vs 自动生成：
      指定 chunk 名称：提供了更好的代码组织和可维护性，因为你可以根据路由或功能区域来命名 chunk。此外，它还可以帮助优化缓存策略，因为你可以更精确地控制哪些 chunk 应该被缓存。
      自动生成：虽然简单，但生成的 chunk 名称可能难以追踪和预测，特别是在大型项目中。这可能会影响缓存优化和代码的可维护性。

      在大多数情况下，对于大型应用来说，使用动态导入并指定 chunk 名称是一个不错的选择，因为它可以在保持应用性能的同时，提供更好的代码组织和可维护性。
 */

import Home from '@/views/home.vue'
export const routes = [
 { path: '/', name:'Home', component: Home },
 { path: '/about',name:'About',  component: () => import(/*webpackChunkName:"about" */'@/views/about.vue') },
 { path: '/me',name:'me',  component: () => import('@/views/me.vue') },
 { path: '/course',name:'Course',  component: () => import('@/views/course.vue') },
{ path:'/course/detail',
          name:'Detail',
          component:()=>import('@/views/Detail.vue')},
     {
          path: '/login',
          name: 'Login',
          component: () => import('@/views/Login.vue')
     }
]